<template>
  <div class="shop">
    <h3>猜你喜欢</h3>
    <div class="span">
      <p @click="yuanjin" class="juli">距离最近</p>
      <p @click="liang" class="xiaoliang">销量最高</p>
      <div>
        <span v-for="(item, index) in shangping" :key="'item' + index">{{
          item.ping
        }}</span>
      </div>
    </div>
    <div class="one" v-for="(item, index) in shuju" :key="index">
      <div class="img">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="right">
        <h4 class="name">{{ item.name }}</h4>
        <span class="xing">{{ item.averagePriceTip }}</span
        ><span class="mai">{{ item.monthSalesTip }}</span>
        <p class="jieshao">{{ item.jieshao }}</p>
        <span class="song">{{ item.shippingFeeTip }}</span>
        <span class="paiming">{{ item.wmPoiScore }}</span
        ><br />
        <span class="onep">{{ item.deliveryTimeTip }}</span>
        <span class="tow">{{ item.distance }}</span>
        <span class="three">{{ item.minPriceTip }}</span>
        <span class="forn">{{ item.forn }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { a } from "@/api";

export default {
  data() {
    return {
      xiabiao: 0,
      shangping: [
        { ping: "年货节热卖" },
        { ping: "津贴联盟" },
        { ping: "满减优惠" },
        { ping: "品质联盟" },
      ],
      shuju: [
        // {
        //   pic: img1,
        //   name: "金百万烤鸭（苏家坨店）",
        //   xing: "★4.3",
        //   mai: "月售1632",
        //   jieshao: "起送价￥20元,远距离配送￥3",
        //   song: "“扬州炒饭棒棒啊”",
        //   paiming: "海淀地区畅销第2名",
        //   onep: "35减12",
        //   tow: "70减35",
        //   three: "100减45",
        //   forn: "150减60",
        // },
      ],
    };
  },
  mounted() {
    a().then((res) => {
      console.log(res.data.list);
      this.shuju = res.data.list;
    });
  },
  methods: {
    yuanjin() {
      this.shuju.sort(function (a, b) {
        return a.wmPoiScore - b.wmPoiScore;
      });
    },
    liang() {
      this.shuju.sort(function (a, b) {
        return b.monthSalesTip - a.monthSalesTip;
      });
    },
  },
};
</script>

<style scoped>
.shop {
  padding: 10px;
  overflow: auto;
}
.span {
  display: flex;
  flex-wrap: wrap;
}
.span p {
  padding: 9px;
  margin: 10px;
}
.span span {
  padding: 5px;
  background: gray;
  margin: 8px;
}
.one {
  display: flex;
  margin-top: 10px;
  padding: 10px;
}
.img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.img img {
  width: 100%;
  height: 100%;
}
.xing {
  color: red;
}
.song,
.paiming {
  font-size: 12px;
  background: yellow;
  color: red;
  margin-right: 15px;
  display: inline-block;
}
.onep,
.tow,
.three,
.forn {
  font-size: 12px;
  background: rgb(255, 255, 228);
  color: red;
  margin-right: 15px;
  display: inline-block;
}
</style>